<template>
  <div>
    <Row class="home-page-content" align="middle">
      <BtnPlain class="com-action-btn" type="primary" @click="goBack">返回</BtnPlain>
      <h3>经营信息接收详情</h3>
    </Row>

    <div class="home-page-content business-Info">
      <Row justify="space-between" align="middle">
        <Row align="middle">
          <BtnPlain class="com-action-btn" :type="info.receiveStatus | getAcceptStatus">{{ info.receiveStatusName }}</BtnPlain>
        </Row>
        <div class="publisher">
          <span>发布人 {{ info.publisher || '--' }}</span>
          <span>发布时间 {{ info.publishTime || '--'}}</span>
        </div>
      </Row>
      <Row class="mt-20" justify="space-between" align="middle">
        <h3>{{ info.projectName }}</h3>
      </Row>
      <!-- 经营信息 -->
      <div class="mask-box">
        <BusinessInfo :info="info" />

        <div v-if="info.receiveStatus !== 'Receive'">
          <div class="mask-content" v-if="info.receiveStatus === 'Rejection'">
            <Icon type="ios-close-circle-outline" size="46" class="red" />
            <h3 class="red">经营信息已拒收</h3>
            <p>{{ info.reasonForRejection }}</p>
          </div>

          <div class="mask-content" v-else>
            <h3>详细经营信息</h3>
            <p>点击查看，发送短信验证接收详细信息</p>
            <Row class="com-action-table-btn" justify="center" align="middle">
              <Button type="error" @click="modalRefuse = true">拒收</Button>
              <slide-verify ref="slideVerify" @captchaFn="captchaFn">
                <Button type="primary" @click="getVerifyCode">查看</Button>
              </slide-verify>
            </Row>
          </div>
        </div>

        <Row type="flex" justify="end" v-if="info.receiveStatus === 'Receive' && !info.busiPersonId">
          <Button class="ml-20" type="primary" @click="modalValue = true">指派经营人员</Button>
        </Row>
      </div>
    </div>
    <Modal v-model="modalRefuse" width="400" title="审核拒绝理由" :mask-closable="false">
      <Input v-model="reasonForRejection" type="textarea" :rows="4" placeholder="请填写拒绝理由" />
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalRefuse = false">取消</BtnPlain>
        <Button type="primary" @click="onSub">提交</Button>
      </Row>
    </Modal>

    <StaffSelect v-model="modalValue" @setStaff="setStaff" title="指派经营人员" />

    <Modal v-model="modalCode" width="400" title="填写验证码" :mask-closable="false">
      <div>
        已发送验证码至手机
        <span class="red">{{mobile}}</span>上！请及时查看！
      </div>
      <Input class="mt-20" v-model="smsCode" placeholder="请输入验证码" />
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalCode = false">取消</BtnPlain>
        <Button type="primary" @click="onSubCode">提交</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import BusinessInfo from '@/pages/businessInformationManage/common/businessInfo.vue'
import { busInfoNotificationGetDetail, busInfoNotificationRejection, busInfoNotificationAppointPersonnel, busInfoNotificationReceive } from '@/api/businessInformationManage.js'
import { getMyInfo, SendVerifyMobileSms, verifyMobileSms } from '@/api/common.js'
import StaffSelect from '@/pages/enterpriseManage/projectFiling/common/staffSelect.vue'
import slideVerify from "@/components/slideVerify";
import { throttle } from 'lodash';

export default {
  name: "businessInfoReceiveDetails",
  components: { BusinessInfo, StaffSelect, slideVerify },
  data () {
    return {
      type: 'view',
      info: {
        receiveStatus: 'Receive'
      },
      // 拒绝按钮的弹窗
      modalRefuse: false,
      reasonForRejection: '',
      // 填写验证码弹窗
      modalCode: false,
      smsCode: '',
      mobile: '',
      // 指派人员弹窗
      modalValue: false,
    };
  },
  created () {
    const { busInfoNotificationId, type } = this.$route.query
    this.type = type
    this.init(busInfoNotificationId)
  },
  methods: {
    async init (busInfoNotificationId) {
      this.info = await busInfoNotificationGetDetail({ busInfoNotificationId })
    },
    goBack () {
      this.$router.replace({ path: "/businessInformationReceive" });
    },
    onRefuse () {
      this.modalRefuse = true
    },
    async onSub () {
      if (!this.reasonForRejection.trim()) {
        this.$Message.error('拒绝理由必填');
        return
      }
      const request = {
        busInfoNotificationId: this.info.busInfoNotificationId,
        reasonForRejection: this.reasonForRejection
      }
      await busInfoNotificationRejection(request)
      this.$Message.success('用户审核已拒绝');
      this.modalRefuse = false
      this.init(request.busInfoNotificationId)
    },
    setStaff: throttle(async function (item) {
      const request = {
        busInfoNotificationId: this.info.busInfoNotificationId,
        busiPersonId: item.userId,
        busiPersonName: item.realName
      }
      await busInfoNotificationAppointPersonnel(request)
      this.$Message.success('操作成功！');
      this.$router.replace({ path: '/businessInformationTrack' });
    }, 500),
    async getVerifyCode () {
      this.$refs.slideVerify.innuser();
      const { mobile } = await getMyInfo()
      this.mobile = mobile
    },
    // 图形验证码成功回调
    async captchaFn () {
      this.modalCode = true
      await SendVerifyMobileSms({ mobile: this.mobile })
    },
    // 短信验证码
    async onSubCode () {
      if (!this.smsCode.trim()) {
        this.$Message.error('验证码必填！');
        return
      }
      const request = {
        mobile: this.mobile,
        code: this.smsCode
      }
      const data = await verifyMobileSms(request)
      if (!data) {
        this.$Message.error('验证码错误！');
        return
      }
      await busInfoNotificationReceive({ busInfoNotificationId: this.info.busInfoNotificationId })
      this.init(this.info.busInfoNotificationId)
      this.modalCode = false
    }
  },
}
</script>

<style lang='less' scoped>
.business-Info {
  margin-top: 20px;

  .mask-box {
    position: relative;
  }

  .mask-content {
    position: absolute;
    top: 175px;
    left: 0;
    width: 100%;
    height: 77%;
    padding-top: 120px;
    text-align: center;
    background-color: #f5f7f9f8;
    z-index: 999;

    > p {
      margin: 10px 0;
    }
  }
}

.red {
  color: #ed4014;
}

.publisher {
  > span {
    margin-left: 20px;
  }
}

.mt-20 {
  margin-top: 20px;
}

.ml-20 {
  margin-left: 20px;
}
</style>
